import React from 'react';

import CommentList from './conponents/CommentList';

import './App.css';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            commentList: [
                {
                    id: 1,
                    content: 'Angular 是 MVVM 始祖',
                    author: 'Amy',
                },
                {
                    id: 2,
                    content: 'Vue 是一个效率框架',
                    author: 'Jon',
                },
                {
                    id: 3,
                    content: 'React 才是未来',
                    author: 'Jane',
                },
            ],
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                commentList: [
                    ...this.state.commentList,
                    {
                        id: 4,
                        content: 'JS 才是核心',
                        author: 'mac',
                    },
                ],
            });
        }, 3000);
    }

    render() {
        return (
            <div className="App">
                <CommentList list={this.state.commentList} />
            </div>
        );
    }
}

export default App;
